<template>
	<view class="introduce_view">
		<header :style="'padding-top: '+height.top+'px;height: '+(44+height.top)+'px;'">
			<image :style="'height: '+(44+height.top)+'px;'" src="../../../static/home/4.png" mode="aspectFill"></image>
			<view :style="'height: '+height.height+'px;top: '+height.top+'px;'">
				<u-icon @click="retreat(1)" name="arrow-left" color="#272635" size="32"></u-icon>
				<span>{{title}}</span>
			</view>
		</header>
		<image class="no_record" v-if='!list.length&&status=="nomore"' src="../../../static/image.png" mode="widthFix">
		</image>
		<main>
			<view class="list" v-for="val in list" :key="val.id" @click="spik(val)">
				<image :src="URLimg+val.img" mode="aspectFill"></image>
				<p v-if="is_view==1">{{val.title}}</p>
			</view>
		</main>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_view: 0,
				title: '列表',
				URLimg: this.URLimg,
				flag: false,
				page: 1,
				list: [],
				height: {},
				// 加载状态 loading加载中 nomore没有更多了 loadmore加载更多
				status: "loading"
			};
		},
		onLoad() {
			this.is_view = uni.getStorageSync('isView')
			if (this.is_view == 1) {
				this.title = '视频列表'
			}
			this.getGoodsLists()
			this.height = uni.getStorageSync('header')
		},
		// 触底刷新
		onReachBottom() {
			if (this.flag) {
				this.getGoodsLists()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page=1
			this.list=[]
			this.flag=true
			this.getGoodsLists()
		},
		methods: {
			retreat: (delta) => {
				uni.navigateBack({
					delta,
				});
			},
			spik(val) {
				uni.setStorageSync('mp4', val)
				uni.navigateTo({
					url: '/pages/homeList/videoDetails/videoDetails'
				});
			},
			getGoodsLists() {
				this.status = "loading"
				this.apifun.unirequest('/api/index/videoList', 'post', {
					page: this.page,
				}, (res) => {
					this.status = "loadmore"
					if (res.data.last_page > res.data.current_page) {
						this.page++;
						this.flag = true
					} else {
						this.flag = false
						this.status = "nomore"
					}
					this.list.push(...res.data.data)
					uni.stopPullDownRefresh()
				},true)
			}
		}
	}
</script>

<style lang="scss">
	.introduce_view {
		&>main {
			width: 690rpx;
			margin: 0 auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&>.list {
				width: 336rpx;
				height: 440rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				position: relative;
				overflow: hidden;

				&>p {
					width: 100%;
					height: 60rpx;
					background: rgba(0, 0, 0, 0.73);
					position: absolute;
					left: 0;
					bottom: 0;
					font-size: 15px;
					color: #fff;
					line-height: 60rpx;
					padding: 0 20rpx;
					box-sizing: border-box;
					@include csstext(1);
				}

				&>image {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					@include cssimg;
				}
			}
		}

		&>header {
			width: 750rpx;
			margin: 0 auto;
			position: sticky;
			top: 0;
			z-index: 999;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			&>view {
				width: 690rpx;
				z-index: 999;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);

				&>span {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					font-size: 18px;
					font-weight: bold;
				}

				&>.u-icon {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			&>image {
				width: 100%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 998;
				@include cssimg;
			}
		}
	}
</style>